<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>聊天室</title>
	<style type="text/css">
		* {margin:0; padding:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;}
		* html body {overflow:visible;}
		* html iframe, * html frame {overflow:auto;}
		* html frameset {overflow:hidden;}
		body {color:#000; font-family:-apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;}
		body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, tr {margin:0; padding:0;}
		li {list-style: none;}
		::-webkit-scrollbar {
	    	width: 3px;
		}
		 
		/* Track */
		::-webkit-scrollbar-track {
		    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
		    -webkit-border-radius: 10px;
		    border-radius: 10px;
		}
		 
		/* Handle */
		::-webkit-scrollbar-thumb {
		    -webkit-border-radius: 10px;
		    border-radius: 10px;
		    background: #EFEFEF; 
		    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
		}
		::-webkit-scrollbar-thumb:window-inactive {
			background: rgba(255,0,0,0.4); 
		}

		.chat-box{margin:auto;margin-top:20px;margin-bottom:100px;width:900px;height:700px;background-color:white;border-radius:4px;}
		
		.left{float:left;position:relative;height:700px;width:700px;}
		.right{float:left;position:relative;height:700px;width:200px;}
		
		.message-box{width:100%;height:580px;overflow-x:hidden;overflow-y:auto;border:1px solid #DEDEDE;border-bottom:none;padding-bottom:20px;}
		.message-box ul li{width:500px;height:auto;position:relative;margin-top:10px;}
		.message-box ul li .avatar{width:37px;height:37px;border-radius:100%;margin-left:7px;margin-top:7px;}
		.message-box ul li .username{font-weight:bold;}
		.message-box ul li .send-time{color:#464646;font-size:13px;}
		.message-box ul li .msg{padding:5px;background-color:#EFEFEF;border-radius:4px;width:auto;max-width:450px;font-weight: normal;font-size:14px;line-height:28px;margin-top:3px;}
		.msg-recv .left-info{width:50px;float:left;}
		.msg-recv .right-info{width:450px;float:right;}
		.msg-send{float:right;width:500px;}
		.msg-send .left-info{width:450px;float:left;}
		.msg-send .right-info{width:50px;float:right;}

		.send-box{width:100%;height:120px;border:1px solid #EFEFEF;}
		.send-box textarea{width:100%;height:120px;outline:none;resize:none;font-size:16px;padding:5px;}
		.send{outline: none;width:120px;height:37px;background-color:#89D542;border:none;border-radius:5px;font-color:white;font-size: 15px;color:white;}
		.send:hover{background-color:#EFEFEF;background-color:black;cursor:pointer;}
		
		.online-list{width:200px;height:700px;border-right:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;}
		.title{font-size:20px;font-weight:normal;text-align:center;background-color:#EFEFEF;padding-top:5px;padding-bottom:5px;}
		.online-list .avatar{float:left;width:50px;}
		.online-list .avatar img{width:37px;height:37px;border-radius:100%;margin-left:13px;margin-top:7px;}
		.online-list .name{float:left;width:149px;height:50px;line-height:50px;padding-left:10px;}
		.online-list ul li{height:50px;border-bottom:1px solid #DFDFDF;}
	</style>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="json2.js"></script>
	<script type="text/javascript">
		ws = false;
		username = 'test';//prompt("请输入你的昵称","");
		if(username!=null && username!=""){
		    ws = new WebSocket("ws://192.168.100.142:8000");
		    //握手监听函数
			ws.onopen = function(){
			    //状态为1证明握手成功，然后把client自定义的名字发送过去
			    if(ws.readyState==1){
		            ws.send("username="+username+"&to=all&type=online&msg=欢迎小伙伴【"+username+"】加入聊天室！");
		        }
			}
		}
	</script>
</head>
<body>
	<h1 style="text-align:center;">实时在线聊天</h1>
	<div class="chat-box">
		<div class="left">
			<div class="message-box">
				<ul>
					<!-- <li class="msg-recv">
						<div class="left-info">
							<img src="summer.jpg" class="avatar">
						</div>
						<div class="right-info">
							<p><span class="username">Orange</span>&nbsp;&nbsp;&nbsp;<span class="send-time">14:01:59</span></p>
							<p class="msg">有没有女师傅要收徒?</p>
						</div>
					</li>
					<div style="clear:both;"></div>
					<li class="msg-send">
						<div class="left-info">
							<p style="text-align:right;"><span class="send-time">2017-02-24 14:01:59</span>&nbsp;&nbsp;&nbsp;<span class="username">Orange</span></p>
							<p class="msg">有没有女师傅要收徒，要求师傅年龄在165-175之间，体重90左右，面容姣好,学的不深的话很容易，但是涉及到内存优化，电量优化，布局层级嵌套就不是初级android能搞的了</p>
						</div>
						<div class="right-info">
							<img src="summer.jpg" class="avatar">
						</div>
					</li>
					<div style="clear:both;"></div> -->
				</ul>
			</div>
			<div class="send-box">
				<textarea name="send-msg-content"></textarea>
				<button class="send">发送消息</button>
			</div>
		</div>
		<div class="right">
			<div class="online-list">
				<div class="title">在线成员(<span id="online-nums"></span>)</div>
				<ul>
					<li>
						<div class="avatar"><img src="avatar.jpg"></div>
						<div class="name"><script>document.write(username);</script></div>
					</li>
				</ul>
			</div>
		</div>
	</div>

<script>
jQuery(document).ready(function($) {
	
	if(typeof(WebSocket)=='undefined'){alert('你的浏览器不支持 WebSocket,推荐使用Google Chrome 或者 Mozilla Firefox');}else{console.log('支持websocket');}

	//监听服务器端推送的消息
	ws.onmessage = function(msg){
		var data = JSON.parse(msg.data);
		if(data.type == 'online'){
			online(data);
		}
		if(data.type == 'msg'){
			receiveMsg(data);
		}
		if(data.type == 'offline'){
			offline(data);
		}
	}
	//错误返回信息函数
	ws.onerror = function(){
	    console.log("error");
	};
	//断开WebSocket连接
	ws.onclose = function(){
	    // ws = false;
	    ws.close();
	}

	$("button.send").click(function(event) {
		var msg = $("textarea[name='send-msg-content']").val();
		if(msg == ''){
			alert('请输入内容！');
			return false;
		}
		sendMsg(msg);
	});

	function receiveMsg(data){
		var html = "<li class='msg-recv'>"
					+	"<div class='left-info'>"
					+		"<img src='summer.jpg' class='avatar'>"
					+	"</div>"
					+	"<div class='right-info'>"
					+		"<p><span class='username'>"+data.username+"</span>&nbsp;&nbsp;&nbsp;<span class='send-time'>14:01:59</span></p>"
					+		"<p class='msg'>"+$.trim(data.msg)+"</p>"
					+	"</div>"
					+"</li>"
					+"<div style='clear:both;'></div>";
		$(".message-box ul").append(html);
		scrollHeight = $(".message-box ul").height();
		$(".message-box").animate({scrollTop: scrollHeight}, 1000);
	}

	function sendMsg(msg){
		var html = "<li class='msg-send'>"
					+	"<div class='left-info'>"
					+		"<p style='text-align:right;'><span class='send-time'>2017-02-24 14:01:59</span>&nbsp;&nbsp;&nbsp;<span class='username'>"+username+"</span></p>"
					+		"<p class='msg'>"+$.trim(msg)+"</p>"
					+	"</div>"
					+	"<div class='right-info'>"
					+		"<img src='summer.jpg' class='avatar'>"
					+	"</div>"
					+"</li>"
					+"<div style='clear:both;'></div>";
		// 先发往服务器
		ws.send('msg='+msg+'&to=all&type=msg');
		// 客户端同步显示
		$(".message-box ul").append(html);
		$("textarea[name='send-msg-content']").val('');
		scrollHeight = $(".message-box ul").height();
		$(".message-box").animate({scrollTop: scrollHeight}, 1000);
	}

	function online(data){
		// 改变在线数
		$("#online-nums").text(data.online_nums);
		// 添加用户
		var html = "<li key='"+data.key+"'>"
					+	"<div class='avatar'><img src='avatar.jpg'></div>"
					+	"<div class='name'>"+data.username+"</div>"
					+"</li>";
		$(".online-list ul").append(html);
	}

	function offline(data){
		// 改变在线数
		$("#online-nums").text(data.online_nums);
		// 移除用户(key)
		$(".online-list ul li").remove("li[key='"+data.key+"']");
	}
});
</script>
</body>
</html>